---
name: useToggle
route: /useToggle
menu: 'State'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';
import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useToggle

用于在两个状态值间切换的 Hook。

## 代码演示

### 基础使用

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='基础使用' description='默认为 boolean 切换，基本用法与 useBoolean 一致。'>
  <Demo1 />
</JackBox>

### 进阶使用

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='进阶使用' description='接受两个参数，在参数间进行切换。'>
  <Demo2 />
</JackBox>

## API

```javascript
const {
  state, 
  toggle,
  setLeft,
  setRight
} = useToggle(
  defaultValue?: boolean,
);

const {
  state, 
  toggle,
  setLeft,
  setRight
} = useToggle(
  defaultValue: any = false,
  reverseValue?: any,
);
```

### Result

| 参数     | 说明                                 | 类型                 |
|----------|--------------------------------------|----------------------|
| state  | 状态值                         | boolean              |
| toggle | 触发状态更改的函数,可以接受两个可选参数修改状态值 | (defaultValue: any = false, reverseValue?: any) => void |
| setLeft | 设置为默认值 | () => void |
| setRight | 设置为相反值 | () => void |

### Params

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| defaultValue | 可选项，传入默认的状态值  | number \| string \| boolean \| undefined | false      |
| reverseValue | 可选项，传入取反的状态值  | number \| string \| boolean \| undefined | -      |